<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 变量的作用域，简单来说，就是变量的有效范围。分为函数作用域和全局作用域。
        // 函数作用域里如果用var声明变量，则该变量为局部变量，只能在函数内访问
        // 函数作用域里如果不用var声明变量，则该变量为全局部变量，在window内可访问
        function pp() {
            var name1 = "lhb"
        }
        pp()
        // console.log(name1) //name1 is not defined

        function foo() {
            name2 = "wsh"
        }
        foo()
        console.log(name2) //wsh

    </script>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <script>
        var nodes = document.getElementsByTagName('div')
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].onclick = function () {
                console.log(i);
            }
        }
        for (var i = 0; i < nodes.length; i++) {
            (function (i) {
                nodes[i].onclick = function () {
                    console.log(i);
                }
            })(i);
        }


        // 函数作为参数传递
        function caculat(callback) {
            setTimeout(() => {
                callback('执行完了')
            }, 3000);
        }
        console.log('开始执行');
        caculat(function (tag) {
            console.log(tag);
        })

        // window.onresize = function(){
        //     console.log('resize');
        // }



        // 节流 高频事件触发，n秒内只会执行一次，节流会稀释函数的执行频率
        var throttle = function (fn, interval) {
            var __self = fn;
            var timer;
            var firstTime = true;
            return function () {
                var args = arguments;
                var __me = this;    //window，throttle是普通函数调用

                console.log(args[0]);
                console.log(args[1]);
                console.log(args.length);
                console.log(__me);
                console.log(__self);

                if (firstTime) {
                    __self.apply(__me, args)
                    return firstTime = false;
                }
                if (timer) {
                    return false;
                }
                timer = setTimeout(() => {
                    clearTimeout(timer)
                    timer = null
                    __self.apply(__me, args)
                }, interval || 500);
            }
        }

        window.onresize = throttle(function () {
            console.log('resize');
        }, 500); // 给浏览器窗口尺寸变化绑定一个函数，当变化时，执行后面的函数。此时，先执行throttle函数，传两个参数进去。第一个是函数
        // 第二个是时间。

            // window.onresize = function(){
            //     console.log('object'); // onresize後面是可执行函数。
            // }


            // window.onresize = resizeok()  //应该是个可执行函数，这样写 相当于给了个函数调用，函数调用又没有返回值，相当于onresize时什么都不干。
            // function resizeok(){
            //     console.log('object000');
            // }



                




    </script>
</body>

</html>